<template>
  <div class="home">
    <div class="body">
      <router-view />
    </div>
    <div class="footer">
      <!-- {{header}} -->
      <!-- <router-link to="/about" class="tofooter">首页</router-link>
         <router-link to="/Tourist"  class="tofooter">我的</router-link>
      <router-link to="/Tou"  class="tofooter">二手</router-link>-->
      <!-- 用v-for渲染遍历 -->
                                  <!-- @click="change(item.meta.title)" -->
      <div v-for="(item,idx) in footerList" :key="idx" >  
        <router-link :to="item.path" class="tofooter">
          <p class="list3"><van-icon :name="item.meta.icon" /></p>
          <p class="mk">{{item.meta.title}}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import MainPage from "../router/mianPage";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      footerList: [],
      // header:''
    };
  },
  created() {
    //这个的数据是
    this.footerList = MainPage;
  },
  //点击名字变
  // methods: {
  //   change(title) {
  //     this.header=title
  //   }
  // }
};
</script>
<style lang="scss">
.body {
  flex: 1;
  overflow-y: scroll;
}
.footer {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
}
.tofooter.router-link-exact-active {
  color: red;
}
.list3{
  margin-left: 10px;

}
.mk{
 
  margin-left: 5px;
  margin-top: -15px;
}
</style>
